<template>
  <div class="main">
    <div class="topic1">
      <el-container class="container_main">
        <el-main
          ><el-container
            ><el-main
              ><img
                src="../../assets/img/peiki.png"
                alt=""
                style="width: 160px; height: 160px" /></el-main
            ><el-main class="newmusiccontent"
              ><div style="text-align: left">
                <p style="font-size: 20px; font-weight: bold">眼泪落下之前</p>
                <p
                  style="
                    font-size: 20px;
                    font-weight: bold;
                    opacity: 40%;
                    margin-top: -20px;
                  "
                >
                  汪苏泷
                </p>
                <!-- <br> -->
                <p style="opacity: 40%; font-weight: bold; font-size: 17px">
                  价格 : 8.00元
                </p>
              </div></el-main
            ></el-container
          ></el-main
        >

        <el-main @click=toBuyVip
          ><img src="../../assets/img/vip-fill.png" alt="" class="vip-fill" />
          <div class="vipdesc">购买VIP</div>
          <div class="vipdesc">畅听所有歌曲</div></el-main
        >
      </el-container>
    </div>
    <div class="topic2">
      <div class="pay_container">
        <div class="paytitle">支付方式</div>
        <div class="pay_method">
          <el-container class="method_container">
            <el-main style="margin-right: -80px">
              <div class="method">微信</div>
              <img src="../../assets/img/paycode.png" alt="" class="paycode" />
            </el-main>
            <el-main style="margin-left: -80px">
              <div class="method">支付宝</div>
              <img src="../../assets/img/paycode.png" alt="" class="paycode" />
            </el-main>
          </el-container>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "songs",
  methods: {
    toBuyVip() {
      this.$router.push("/buy/vip");
    },
  },
};
</script>
<style scoped>
.method_container {
  height: 100%;
}
.paycode {
  height: 120px;
  width: 120px;
  margin-top: 20px;
}
.method {
  font-size: 24px;
  opacity: 40%;
}
.pay_method {
  text-align: center;
  height: 90%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.paytitle {
  font-size: 24px;
  opacity: 40%;
}
.pay_container {
  width: 1000px;
  height: 100%;
  margin: 0 auto;
}
.topic2 {
  width: 100%;
  background-color: white;
  height: 300px;
  margin-bottom: 60px;
}
.main {
  width: 100%;
}
.vipdesc {
  font-size: 20px;
  font-weight: bold;
  opacity: 40%;
}
.topic1 {
  width: 1200px;
  margin: 0 auto;
  height: 400px;
  margin-top: 60px;
  text-align: center;
}
.container_main {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.newmusiccontent {
  /* text-align: left; */
  /* display: flex; */
  display: -webkit-flex;
  justify-content: center;
  align-items: center;
  margin-left: -230px;
}
.vip-fill {
  height: 80px;
  width: 80px;
}
</style>>
